
<script lang='tsx'>
import { computed, defineComponent } from 'vue'
import variables from '@/styles/variables.scss'
import { useRoute, RouteRecordRaw, RouterLink, useRouter } from 'vue-router'
import { menuRoutes } from '@/router/menuRouter'
export default defineComponent({
  name: 'SideBar',
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    // 颜色主题
    const scssVariables = computed(() => variables)
    const route = useRoute()
    const router = useRouter()
    const activeMenu = computed(() => {
      const { path, meta } = route
      // 可根据meta.activeMenu指定 当前路由激活时 让哪个菜单高亮选中
      if (meta.activeMenu) return meta.activeMenu
      return path
    })
    // 是否有子组件并且子组件长度大于1
    const isChildren = (route:RouteRecordRaw) => route.children && route.children.length > 1
    // 是否显示，所有的子组件hidden都为false，即为显示
    const isShow = (children:Array<RouteRecordRaw>) => children.some(child => !child.meta?.hidden)
    // 是否是外链
    const isExternal = (path:string) => /^(http(s)??:|mailto:|tel:)/.test(path)
    const toRoute = (path:string) => {
      if (isExternal(path)) {
        window.open(path)
      } else {
        router.push(path)
      }
    }
    return () => {
      const renderChildren = (menuRoutes:Array<RouteRecordRaw>) => {
        return (menuRoutes).map(route => {
          const icon = route.meta?.icon
          // route.children存在并且长度大于1或者route.children的所有子组件为显示
          return isChildren(route) || isShow(route.children || [])
            ? <el-submenu index={route.path} v-slots={{
              title: () => {
                // icon存在，根据前缀判断使用自定义svg组件还是饿了么的icon组件
                // icon不存在，渲染空标签
                return <>
                  {icon
                    ? ((icon as string).startsWith('el-icon-')
                      ? <i class={route.meta?.icon}></i>
                      : <svg-icon class='svg-icon-menu' icon-class={route.meta?.icon}></svg-icon>)
                    : <></>
                  }
                  <span class='sidebar-menu-title'>{route.meta?.title}</span>
                </>
              }
            }}>
              {renderChildren(route.children || [])}
            </el-submenu>
            : <el-menu-item index={route.path} onClick={() => toRoute(route.path)}>
              {
                icon
                  ? ((icon as string).startsWith('el-icon-')
                    ? <i class={route.meta?.icon} ></i>
                    : <svg-icon class='svg-icon-menu' icon-class={route.meta?.icon}></svg-icon>)
                  : <></>
              }
              <span class='sidebar-menu-title'>{route.meta?.title}</span>
            </el-menu-item>
        })
      }
      return (
        <el-menu
          class="sidebar-container-menu"
          mode="vertical"
          default-active={activeMenu.value}
          background-color={scssVariables.value.menuBg}
          text-color={scssVariables.value.menuText}
          active-text-color={scssVariables.value.menuActiveText}
          collapse-transition={true}
          collapse={props.isCollapse}
        >
          {renderChildren(menuRoutes)}
        </el-menu>
      )
    }
  }
})
</script>
<style scoped lang='less'>
</style>
